#body {
  background-color: #fae8c8;

  >div {
    width: 1000px;
    margin: 0 auto;

    >.list {
      display: flex;
      flex-wrap: wrap;

      >li {
        &:hover {
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
          transform: scale(1.02);
        }

        cursor: pointer;
        transition: 0.2s;
        background-color: white;
        border-radius: 6px;
        overflow: hidden;
        // css3 提供了 calc 函数, 可以计算样式的值
        // 运算符左右必须 空格间隔; 否则无法识别
        width: calc((100% - 10px * 2) / 3);
        margin: 0 10px 10px 0;

        // nth-child() :可以按照一定的规则 去选中元素
        // 偶数行: 2n
        // 奇数行: 2n-1
        // 3 6 9 12... 3n
        &:nth-child(3n) {
          margin-right: 0;
        }

        >div {
          position: relative;

          >img {
            width: 100%;
          }

          >div {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            bottom: 0;
            padding: 4px;
            display: flex;
            width: 100%;
            justify-content: space-between;
          }
        }

        >p {
          padding: 10px 10px 30px 10px;
        }
      }
    }

    >.pager {
      display: flex;
      justify-content: center;
      padding: 20px 0;

      >button {
        background-color: white;
        padding: 10px 15px;
      }

      >ul {
        display: flex;

        >li {
          cursor: pointer;
          background-color: white;
          width: 37.5px;
          line-height: 37.5px;
          margin-left: 10px;
          text-align: center;

          &:last-child {
            margin-right: 10px;
          }

          &.active {
            background-color: orange;
            color: white;
          }
        }
      }
    }
  }


}